<template>
  <div class="collection-page">
    <cp-nav-bar title="我的收藏" />
    <van-list
    v-model:loading="loading"
    :finished="finished"
    @load="onLoad"
    >
      <div v-for="(item,index) in list"
           :key="index"
           class="card"
           @click="getDetail(item.id)"
           v-if="list.length">
        <img :src="baseURL + item.fileList[0]?.filePath"
             alt="">
        <div class="info">
          <p>{{item.scenicName}} <span>{{item.level}}</span></p>
          <span v-for="items in item.scenicLabel.split(',')" :key="items"> 
            {{ scenic_label_type[items].label }}
          </span>
          <div>
            <span ><i v-if="item.weekdayPrice">￥</i>{{item.weekdayPrice}}</span>
            <van-button native-type="submit"
                        round
                        type="primary"
                        size="small"
                        color="#B50C16"
                        >
              <span style="padding:0 10px;font-size: 16px;">预定</span>
            </van-button>
          </div>
        </div>
      </div>
      <van-empty :image="empty" image-size="200"  description="暂无数据" v-if="!list.length && loading == false" />
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { onMounted,ref,getCurrentInstance } from "vue";
import { useRouter } from 'vue-router'
import {getcollectList} from '@/services/home'
import { baseURL } from '@/utils/request'
import empty from "@/assets/empty.png";
const { proxy } = getCurrentInstance();
const { scenic_label_type } = proxy.useDict("scenic_label_type");

const router = useRouter()
const list = ref([]);
const total = ref();
const loading = ref(false);
const finished = ref(false);
const pageNum = ref(1);
const getDetail = (id:number|string) => {
  console.log("预定",id);
  router.push('/home/detail?id='+id)
};

const onLoad = () => {
        getcollectList({pageNum: pageNum.value++}).then(res => {
          if(res.code == 200){
            console.log("res::", res);
            list.value = list.value.concat(res.rows)
            total.value = res.total
            // 加载状态结束
            loading.value = false;
            // 数据全部加载完成
            if (list.value.length >= total.value) {
              finished.value = true;
            }
          }
        })
};
</script>

<style lang="scss" scoped>
.collection-page{
  // overflow: scroll;
  width: 375px;
  // height: 100%;
  min-height:calc(100vh - 70px);

  padding-top: 60px;
  padding-bottom: 8px;
  background-color: var(--cp-bg);
  .card {
    margin: auto;
      background-color: #fff;
      width: 345px;
      //   min-height: 305px;
      //   background-color: #ccc;
      margin-bottom: 15px;
      border-radius: 12px;
      overflow: hidden;
      img {
        width: 345px;
        height: 180px;
      }
      .info {
        margin-left: 10px;
        // background-color: pink;
        p {
          padding: 8px 0;
          font-size: 16px;
          > span {
            font-size: 12px;
            color: var(--cp-text3);
            font-weight: 600;
          }
        }
        > span {
          font-size: 11px;
          color: #ccc;
          border: 1px solid #ccc;
          padding: 2px 3px;
          margin-right: 5px;
        }
        div {
          margin: 7px 0;
          margin-right: 10px;
          display: flex;
          justify-content: space-between;
          > span {
            font-size: 24px;
            color: rgba(203, 22, 29, 1);
            i {
              font-size: 12px;
              font-style: inherit;
            }
          }
        }
      }
    }
}
</style>
